<template>
	<view class="content" v-if="htmlshow">
		<Nav :title="datas.main_title" color='#fff' heightmxx="0" :backIcon="false" :lefticon='true'></Nav>
		<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="3000">
			<swiper-item v-for="(item, index) in datas.imgs" :key="index" style="width: 100%;">
				<image :src="item.img" mode="aspectFill" style="height: 748rpx;width: 100%;"></image>
			</swiper-item>

		</swiper>
		<view class="mian">
			<view class="dis_f aic">
				<view class="fs32  mr20 fwb">
					{{datas.main_title}}
				</view>
				<view class="fs28  mr20 mt10 ">
					{{datas.sub_title}}
				</view>
			</view>

			<view class="dis_f aic mt20">
				<view class="cred">
					<text class="fs30">¥</text>
					<text class="fs48">{{datas.selling_price}}</text>
				</view>
				<view class="table dis_f aic juc">
					{{datas.goods_type_cn}}
				</view>
			</view>
			<view class="dis_f aic mt20" style="border-bottom: 1px solid #efefef; padding-bottom: 20rpx;">
				<view class="c6 fs28 mr20" v-if="datas.goods_type != 2">
					<text class="">价格：</text>
					<text class="" style="text-decoration: line-through;">¥{{datas.market_price}}</text>
				</view>

				<view class="fs24" style="color: #f6b542;" v-if="datas.goods_type == 1">
					送{{datas.cpa}}积分
				</view>
				<view class="fs24" style="color: #f6b542;" v-if="datas.goods_type == 2">
					送{{datas.cps}}余额
				</view>
			</view>
			<!-- <view class="dis_f aic jub mt20 " @click="show =true " v-if="datas.is_attrs == 1">
				<text class="fs30">{{guititle || "选择规格与数量"}}</text>
				<text class="iconfont icon-xiangyoujiantou"></text>
			</view> -->
		</view>
		<view class="mian  " style="padding-bottom: 150rpx;">
			<view class="dis_f aic ">
				<view class="tab-scroll_item tabzhon">
					商品详情
				</view>
			</view>
			<view class=" mt20" v-html="datas.details">

			</view>

		</view>
		<view class="fonotr dis_f aic">

			<button type="default" open-type="contact" class="dis_f aic juc" style="width:25% ;height: 100%;">
				<view class="dis_f aic juc">
					<text class="icon-xiaoxizhongxin iconfont"></text>
					<view class="ml10 fs26">咨询</view>
				</view>
			</button>

			<view class="dis_f aic juc cf" style="width:75% ;height: 100%;background: #feb746;" @click="jump">
				立即购买
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				htmlshow: false,
				attrs_id: "",
				imgs: [{
					img: 'https://w.wallhaven.cc/full/d6/wallhaven-d6o77l.jpg'
				}],
				tablist: [{
						name: '商品详情',
					}, {
						name: '商品评价',
					},

				],
				tabindex: 0,
				commindex: 0,


				commlist: [],
				commitdatas: [],
				guiindex: 0,


				guilist: [{}],
				show: false,
				value: 1,
				id: '',
				datas: "",
				page: 1,
				pageConten: 0,
				loadstatus: '上拉加载更多',
				guiimg: '',
				guititle: '',
				guiprice: '',
				userinfo: ""
			}
		},
		onLoad(option) {
			this.userinfo = uni.getStorageSync('userInfo') || ''
			console.log(option.invite_id)
			this.id = option.id
			uni.setStorageSync('invite_id', option.invite_id)
			this.postlist()
		},

		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			return {
				title: this.datas.main_title,
				type: 0,
				path: '/pagesA/in_details/in_details?id=' + this.id + '&invite_id=' + this.userinfo.id,
				imageUrl: this.datas.imgs[0].img
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.datas.main_title,
				type: 0,
				path: '/pagesA/in_details/in_details?id=' + this.id + '&invite_id=' + this.userinfo.id,
				imageUrl: this.datas.imgs[0].img
			}
			// }
		},
		methods: {
			// 图片预览
			imgPreview(img, index) {

				uni.previewImage({
					indicator: "number",
					loop: true,
					current: index,
					urls: img
				})
			},
			guicli(index, item) {
				this.guiindex = index
				this.guiimg = item.img
				this.guititle = item.attrs
				this.attrs_id = item.id
				this.guiprice = item.selling_price
			},
			cosdcli(index) {
				let that = this
				var ids = this.datas.id;

				that.api.post('user/setcostItem', {
					goods_id: index ? ids : [ids],
					type: index
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						that.postlist()
					}


				})
			},
			postlist() {
				let that = this

				that.api.post('index/goodsDetails', {
					id: this.id,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {

						this.datas = res.data
						this.htmlshow = true
						res.data.details = res.data.details.replace(/\<img/gi,
							'<img class="rich_text_img" ')

					}


				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			tabcli(index) {
				this.tabindex = index

			},
			commcli(index) {

				this.commindex = index
				this.commitdatas = []
				this.page = 1
				this.postcommit()

			},
			gucli(index) {
				this.guindex = index

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			jump() {
				if (this.userinfo == '') {
					// this.showxieyi = true
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
					uni.reLaunch({
						url: '/pages/my/my'
					})
					return false
				}
				this.show = false
				uni.navigateTo({
					url: '/pagesA/in_payment/in_payment?attrsid=' + this.datas.attrs[0].id + '&id=' + this.id
				})
			}
		}
	}
</script>

<style>
	button {
		padding: 0;
		margin: 0;
		height: 57rpx;
		background: #fff;
		line-height: 0.9;
	}

	button::after {
		border: none;
	}

	.btncliim {
		width: 80%;
		margin-left: 70rpx;
		height: 86rpx;
		background: #E9121D;
		border-radius: 43rpx;
		margin-top: 150rpx;
		margin-bottom: 50rpx;
	}

	.gui_sty {
		margin-right: 10rpx;
		font-size: 24rpx;

		background: #DFDFDF;
		border-radius: 10rpx;
		padding: 10rpx 15rpx;
	}

	.guizhong {
		position: relative;
		color: #fff !important;

		background: #E9121D !important;
		font-size: 26rpx;
		font-weight: bold;
	}

	.showimg {
		width: 163rpx;
		height: 154rpx;
		border-radius: 11rpx;
	}

	.bottompopup {
		height: 600rpx;
		padding: 30rpx;
	}

	.commliscontimg {
		width: 220rpx;
		height: 225rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.commlisimg {
		width: 56rpx;
		height: 56rpx;
		border-radius: 60rpx;
	}

	.fonotr {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 91rpx;
		background: #FFFFFF;
		width: 100%;

	}

	.mian {
		background: #FFFFFF;
		/* width: 100%; */
		padding: 25rpx;
		box-sizing: border-box;
	}

	.tab-scroll_item {
		margin-right: 51rpx;
		font-size: 30rpx;
	}

	.comm_sty {
		margin-right: 10rpx;
		font-size: 24rpx;
		color: #E9121D;

		border: 1px solid #E3393C;
		border-radius: 60rpx;
		padding: 6rpx 10rpx;
	}

	.commzhong {
		position: relative;
		color: #fff !important;
		background-color: #E3393C;
		font-size: 26rpx;
		font-weight: bold;
	}

	.tabzhon {
		position: relative;
		color: #E9121D;
		font-size: 30rpx;
		font-weight: bold;
	}

	.table {
		font-size: 26rpx;
		font-family: AlibabaPuHuiTi_3_55_Regular;
		font-weight: 400;
		color: #FF9A17;
		width: 115rpx;
		height: 37rpx;
		border: 1px solid #FF9A17;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}

	.icon-fenxiang {
		font-size: 60rpx;
	}

	.swiper {
		width: 100%;
		margin: -50rpx 0 0 0;
		overflow: hidden;
		height: 748rpx;
	}

	.mian {
		background: #FFFFFF;
		/* width: 100%; */
		padding: 25rpx;
		box-sizing: border-box;
	}
</style>